<template>
  <div>
    <Header :isGoBack="false">
      <template v-slot:left>
        <span style="color:#fff"
          >体验生词库 <i class="el-icon-arrow-right"></i> 学习中心</span
        >
      </template>
      <template v-slot:right>
        <div class="btn" @click="goStudyIndex">返回首页</div>
      </template>
    </Header>
    <div class="study-center w1200" style="margin-top: 50px;">
      <div class="study-conatiner flex-space-be">
        <div
          class="intelligent-study study-item mr20"
          id="step4"
          v-loading="getUnitLoading"
        >
          <div class="intelligent-study-header study-item-header flex-space-be">
            <span>智能学习区</span>
            <span>
              <i
                style="font-size: 18px;"
                class="el-icon-reading header-right"
              ></i>
              <span
                style="font-size: 16px;"
                class="header-right click"
                @click="goWordBook('first')"
              >
                单词本</span
              >
            </span>
          </div>

          <div class="intelligent-study-container flex-space-be">
            <div
              class="
                  intelligent-study-left
                  mr20
                  study-cotainer
                  intelligent-study-item
                "
              id="step5"
            >
              <div class="intelligent-study-unit">
                <div
                  class="
                      study-cotainer-title
                      intelligent-item-header
                      flex-space-be
                    "
                >
                  <span class="title">单元</span>
                  <el-popover placement="bottom-start" trigger="hover">
                    <div class="study-schedule-info">
                      <p>
                        打开进度后，单元名称后面的图标便是各个模块的学习状态，如图所示：
                      </p>
                      <p class="study-schedule">
                        <span class="schedule-icon study-nolearn"></span>
                        <span class="schedule-text ml5 mr10">未学</span>
                        <span class="schedule-icon study-learning my_progress">
                          <el-progress
                            :show-text="false"
                            type="circle"
                            :percentage="66"
                            :width="12"
                            :height="12"
                            :stroke-width="2"
                            :color="$store.getters.color_main"
                          ></el-progress>
                        </span>
                        <span class="schedule-text ml5 mr10">正在学</span>
                        <span class="schedule-icon study-quick"></span>
                        <span class="schedule-text ml5 mr10">极速挑战</span>
                        <span class="schedule-icon study-pass"></span>
                        <span class="schedule-text ml5 mr10">通过</span>
                        <span class="schedule-icon study-nopass"></span>
                        <span class="schedule-text ml5 mr10">未通过</span>
                        <span class="schedule-icon study-ultimate"></span>
                        <span class="schedule-text ml5 mr10">终极挑战</span>
                      </p>
                    </div>
                    <img
                      slot="reference"
                      src="@/assets/img/icon/help-normal.png"
                      alt=""
                    />
                  </el-popover>
                </div>
                <div class="study-unit">
                  <div class="scorll-box">
                    <ul class="study-unit-list">
                      <li
                        v-for="unit in gradeList"
                        :key="unit.id"
                        :class="checkedUnit == unit.id ? 'checked-unit' : ''"
                        @click="checkUnit(unit)"
                      >
                        <h5>
                          {{ unit.name }}
                        </h5>
                        <div class="study-schedule">
                          <span class="schedule-icon my_progress">
                            <el-progress
                              :show-text="false"
                              type="circle"
                              :percentage="checkedUnit == unit.id ? 100 : 0"
                              :color="$store.getters.color_main"
                              :width="12"
                              :height="12"
                              :stroke-width="2"
                            ></el-progress>
                          </span>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="
                  intelligent-study-right
                  study-cotainer
                  intelligent-study-item
                "
              id="step6"
            >
              <div class="study-cotainer-title intelligent-item-header">
                <span>
                  <span> 模块选择 </span>
                  <img
                    class="ml20 click"
                    @click="dialogModeInfo = true"
                    slot="reference"
                    src="@/assets/img/icon/help-normal.png"
                    alt=""
                  />
                </span>
                <el-dropdown
                  style="float:right"
                  v-if="groupList.length"
                  @command="handleCommand"
                >
                  <span class="el-dropdown-link">
                    {{ groupName
                    }}<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      v-for="item in groupList"
                      :key="item.unit_id"
                      :command="item"
                      >{{ item.unit_name }}</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
              <div class="intelligent-right-conatin">
                <div class="word-study">
                  <div
                    class="word-study-item"
                    v-for="(modeData, index) in gradeModeData"
                    :key="modeData.category"
                    :id="modeData.category == 0 ? 'step7' : ''"
                  >
                    <div class="icon-caret" v-if="index > 0">
                      <img
                        src="@/assets/img/icon/icon-caret-right.png"
                        alt=""
                      />
                    </div>
                    <div
                      class="study-item"
                      :class="[
                        modeData.progressNum >= 100 || modeData.status >= 2
                          ? 'study-border'
                          : '',
                        index == 0 ? 'big-study-item' : 0,
                        $store.getters.isTeacher ||
                        !modeData.totalNum ||
                        modeData.totalNum <= 0
                          ? 'not-click'
                          : 'click',
                      ]"
                      @click="goRoute(modeData)"
                    >
                      <div class="study-item-progress">
                        <div
                          v-if="modeData.status == 2 || modeData.status == 5"
                          class="challenge challenge-quick"
                          :class="[
                            modeData.status == 2 ? 'challenge-quick' : '',
                            modeData.status == 5 ? 'challenge-ultimate' : '',
                            index == 0 ? 'c120' : 'c80',
                          ]"
                        ></div>
                        <!-- <el-progress v-else :width="index == 0 ? 120 : 80" :height="index == 0 ? 120 : 80" type="circle"
                          :percentage="modeData.progressNum" :color="modeData.status > 2 &&
                            (modeData.nearScore || modeData.nearScore == 0) &&
                            modeData.nearScore < 85
                            ? '#F9413A'
                            : $store.getters.color_main
                            " :class="[
    modeData.status > 2 &&
      (modeData.nearScore || modeData.nearScore == 0)
      ? modeData.nearScore < 85
        ? 'red-text'
        : 'green-text'
      : '',
  ]" :format="formatProgress(modeData)"></el-progress> -->
                        <el-progress
                          v-else
                          type="circle"
                          :percentage="
                            modeData.totalNum
                              ? (modeData.number / modeData.totalNum).toFixed(
                                  2
                                ) * 100
                              : 0
                          "
                          :color="
                            modeData.status > 2 &&
                            (modeData.nearScore || modeData.nearScore == 0) &&
                            modeData.nearScore < 85
                              ? '#F9413A'
                              : $store.getters.color_main
                          "
                          :class="[
                            index == 0 ? 'c120' : 'c80',
                            modeData.status > 2 &&
                            (modeData.nearScore || modeData.nearScore == 0)
                              ? modeData.nearScore < 85
                                ? 'red-text'
                                : 'green-text'
                              : '',
                          ]"
                          :format="formatProgress(modeData)"
                        ></el-progress>
                      </div>
                      <div class="study-item-name">
                        {{ categoryObj[modeData.category] }}
                      </div>
                      <p class="study-item-notice" v-if="modeData.reviewNum">
                        需复习：{{ modeData.reviewNum }}
                      </p>
                      <!-- && modeData.status >= 4 -->
                      <!-- <span v-if="!$store.getters.isTeacher" class="
                            click
                            orange-color-text
                            opacity-hover
                            study-item-again
                          " @click.stop="againMemoryClick(modeData.category)">
                        再学一遍
                      </span> -->
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="intelligent-review study-item" id="step3">
          <div class="study-item-header">
            <span>智能复习区</span>
          </div>
          <div class="intelligent-review-container">
            <div class="intelligent-review-once">
              <el-button
                :disabled="$store.getters.isTeacher"
                class="button button-bg-second"
                @click="goReview()"
              >
                一键智能复习
              </el-button>
            </div>
            <ul v-if="$store.getters.isTeacher">
              <li
                v-for="item in reviewData"
                :key="item.category"
                :class="item.num > 10 ? 'checked-item' : ''"
              >
                智能{{ categoryObj[item.category] }} ( {{ item.num }} )
              </li>
            </ul>
            <ul v-else>
              <li
                v-for="item in reviewData"
                :key="item.category"
                @click="goReview(item)"
                class="click"
                :class="item.num > 10 ? 'checked-item' : ''"
              >
                智能{{ categoryObj[item.category] }} ( {{ item.num }} )
              </li>
            </ul>
          </div>
          <div class="btn-box">
            <el-button class="button button-bg-primary" @click="goMemoryReview">
              记忆追踪
            </el-button>
          </div>
        </div>
      </div>
      <el-dialog title="模块说明" :visible.sync="dialogModeInfo">
        <div>
          <div class="mode-item">
            <h4>
              <span class="number">1</span>
              <span class="title">智能记忆</span>
              <el-rate disabled :value="1"></el-rate>
            </h4>
            <p>
              重点训练看词能认的能力。辅助训练单词读音和拼写。记忆引擎驱动能实现40小时记3000生词，词汇学习从此无忧！
            </p>
          </div>
          <div class="mode-item">
            <h4>
              <span class="number">2</span>
              <span class="title">智能词听</span>
              <el-rate disabled :value="2"></el-rate>
            </h4>
            <p>训练听读音懂词义的能力，能快速打牢听力基础，攻破听力难题。</p>
          </div>
          <div class="mode-item">
            <h4>
              <span class="number">3</span>
              <span class="title">智能听写</span>
              <el-rate disabled :value="3"></el-rate>
            </h4>
            <p>
              训练听读音写单词的能力，具有错误精准识别和错误矫正功能，拼音音节让单词拼写更好记。
            </p>
          </div>
          <div class="mode-item">
            <h4>
              <span class="number">4</span>
              <span class="title">智能默写</span>
              <el-rate disabled :value="4"></el-rate>
            </h4>
            <p>
              训练看词义写单词的能力，是词汇学习中难度最高的模块。智能化学习流程保证达到牢固记忆的效果。
            </p>
          </div>
        </div>
      </el-dialog>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="checkTypeDialog"
      @close="questionType = []"
      :width="`${this.checkedBookData.book_id !== 600 ? 600 : 420}px`"
      center
      class="question-type"
    >
      <div>
        <el-form v-if="this.checkedBookData.book_id !== 600">
          <el-form-item label="选择题型">
            <el-checkbox-group v-model="questionType">
              <el-checkbox-button :label="1">英译汉</el-checkbox-button>
              <el-checkbox-button :label="2">汉译英</el-checkbox-button>
              <el-checkbox-button :label="3">听力理解</el-checkbox-button>
              <el-checkbox-button :label="4">听写</el-checkbox-button>
              <el-checkbox-button :label="5">默写</el-checkbox-button>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
        <div v-else class="text-center">进入测试</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          class="button button-border-primary"
          @click="goUnitList('generalTest')"
          >普通模式</el-button
        >
        <el-button
          class="button button-bg-primary"
          @click="goUnitList('quickTest')"
        >
          极速模式
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Header from "@/components/Header";
import Driver from "driver.js";
import "driver.js/dist/driver.min.css";
import steps from "@/utils/steps"; //用来存放引导的步骤
import EventBus from "@/assets/js/eventBus";
import {
  getGradeList,
  groupUnit,
  wordSearch,
} from "@/api/individuationRead.js";
import {
  experienceWordReviewSearch,
  experienceReview,
  getExperienceUnit, //新增
  individualList,
  getUnitList,
  getClassData,
  getReviewNumber,
  studyAgain,
  postStudyAgain,
  getIsForce,
} from "@/api/index";
const demoData = [
  {
    category: 0,
    nearScore: null,
    progressNum: 0,
    reviewNum: 0,
    status: 0,
    studyNum: 0,
    totalNum: 0,
    number: 0,
  },
  {
    category: 1,
    nearScore: null,
    progressNum: 0,
    reviewNum: 0,
    status: 1,
    studyNum: 0,
    totalNum: 0,
    number: 0,
  },
  {
    category: 2,
    progessNum: 0,
    studyNum: 0,
    totalNum: 0,
    number: 0,
  },
  {
    category: 3,
    progessNum: 0,
    studyNum: 0,
    totalNum: 0,
    number: 0,
  },
];
/**
 *  typeObj: {
      0: "记忆",
      1: "英译汉",
      2: "汉译英",
      3: "听力理解",
      4: "听写",
      5: "默写",
    },
 */
export default {
  data() {
    return {
      groupList: [],
      groupName: "",
      gradeModeData: [...demoData],
      bookData: null,
      gradeList: [],
      driver: null,
      checkedUnit: null,
      dialogModeInfo: false,
      unitList: [],
      statusClass: {
        0: "study-nolearn",
        1: "study-learning",
        2: "study-quick",
        3: "study-nopass",
        4: "study-pass",
        5: "study-ultimate",
      },
      checkedBookData: {},
      classData: [],
      categoryObj: {
        0: "记忆",
        1: "词听",
        2: "听写",
        3: "默写",
      },
      categoryRoute: {
        0: "memory",
        1: "wordListen",
        2: "dictation",
        3: "writeMemory",
      },
      reviewData: [],
      checkTypeDialog: false,
      questionType: [],
      getUnitLoading: false,
    };
  },
  computed: {
    unitModeData() {
      return [
        {
          category: 0,
          nearScore: null,
          progressNum: 0,
          reviewNum: 0,
          status: 0,
          studyNum: 0,
          totalNum: 0,
          number: 0,
        },
        {
          category: 1,
          nearScore: null,
          progressNum: 0,
          reviewNum: 0,
          status: 1,
          studyNum: 0,
          totalNum: 0,
          number: 0,
        },
        {
          category: 2,
          progessNum: 0,
          studyNum: 0,
          totalNum: 0,
          number: 0,
        },
        {
          category: 3,
          progessNum: 0,
          studyNum: 0,
          totalNum: 0,
          number: 0,
        },
      ];
      // let unit = this.unitList.filter((item) => {
      //   return item.unit_id == this.checkedUnit;
      // });
      // if (unit && unit.length <= 0) return [];
      // return unit[0].unitData;
    },
    isUlimateChalenge() {
      if (!this.unitModeData || this.unitModeData.length == 0) {
        return false;
      }
      return this.unitModeData.every((item) => {
        return item.status >= 4;
      });
    },
    modeBookSchedule() {
      let data = [];
      if (this.checkedBookData.word_book_vo_list.length > 0) {
        let totalNum = this.checkedBookData.word_book_vo_list[0].total_number;
        for (let i = 0; i < 4; i++) {
          let indexData = this.checkedBookData.word_book_vo_list.findIndex(
            (item) => {
              return item.source == i;
            }
          );
          if (indexData > -1) {
            data.push({
              totalNum,
              studyNum: this.checkedBookData.word_book_vo_list[indexData]
                .study_number,
              category: i,
              number: this.checkedBookData.word_book_vo_list[indexData].number,
            });
          } else {
            data.push({
              totalNum,
              studyNum: 0,
              category: i,
              number: this.checkedBookData.word_book_vo_list[0].number,
            });
          }
        }
      }
      data.forEach((item) => {
        item.progessNum = parseInt((item.studyNum / item.totalNum) * 100);
      });
      data.sort((a, b) => {
        return a.category - b.category;
      });
      return data;
    },
  },
  methods: {
    async individualList(gradeId) {
      const { data } = await individualList(gradeId);
      this.reviewData = data;
    },
    async experienceReview(id) {
      const { data } = await experienceReview(id);
      this.reviewData = data;
    },
    // async getExperienceUnit() {
    //   let res = await getExperienceUnit();
    //   let data = res.data.unit[0];
    //   this.gradeList = data.map((item) => {
    //     const filterArr = res.data.all[0].filter(
    //       (item1) => item1.unitId == item.id
    //     );
    //     if (filterArr[0]) {
    //       return { ...item, info: filterArr[0].totalVoList[0] };
    //     } else {
    //       return { ...item, info: null };
    //     }
    //   });
    //   this.checkedUnit = data[0].id;
    //   this.$set(this.gradeModeData, 0, {
    //     ...this.gradeModeData[0],
    //     ...this.gradeList[0].info,
    //   });
    //   this.experienceReview(this.checkedUnit);
    //   // this.groupUnit(this.gradeList[0].id);
    //   // this.individualList(this.gradeList[0].id);
    // },
    async getExperienceUnit() {
      let res = await getExperienceUnit();
      let data = res.data.unit[0];
      // res.data.all[0]
      const resArr = data.filter((item) => {
        const filterArr = res.data.all[0].filter(
          (item1) => item1.unitId == item.id
        );
        if (filterArr[0]) {
          return true;
        } else {
          return false;
        }
      });
      console.log(resArr, "resArr");
      if (!resArr.length) {
        this.$alert("当前模块暂无数据,请前往单词量体验课学段测试模块进行测试", "提示", {
          confirmButtonText: "确定",
          callback: (action) => {
           this.$router.push({name:"vocabularyCenter"})
          },
        });
      }
      this.gradeList = resArr.map((item) => {
        const filterArr = res.data.all[0].filter(
          (item1) => item1.unitId == item.id
        );
        if (filterArr[0]) {
          return { ...item, info: filterArr[0].totalVoList[0] };
        } else {
          return { ...item, info: null };
        }
      });

      this.checkedUnit = this.gradeList[0].id;
      this.$set(this.gradeModeData, 0, {
        ...this.gradeModeData[0],
        ...this.gradeList[0].info,
      });
      this.experienceReview(this.checkedUnit);
      // this.groupUnit(this.gradeList[0].id);
      // this.individualList(this.gradeList[0].id);
    },
    handleCommand(command) {
      this.groupName = command.unit_name;
      this.groupId = command.unit_id;
      this.$set(this.gradeModeData, 0, {
        ...this.gradeModeData[0],
        ...command.total_vo_list[0],
      });
    },
    async groupUnit(gradeId) {
      let res = await groupUnit(gradeId);
      console.log(
        res.data.filter((item) => item.total_vo_list.length).length,
        "res1515"
      );
      if (
        res.code == 405 ||
        !res.data.filter((item) => item.total_vo_list.length).length
      ) {
        console.log(111111);
        this.gradeModeData = [...demoData];
        return;
      }
      this.groupList = res.data.filter(
        (item) => item.total_vo_list[0] && item.total_vo_list[0].totalNum
      );
      this.groupName = this.groupList[0].unit_name;
      this.groupId = this.groupList[0].unit_id;
      this.$set(this.gradeModeData, 0, {
        ...this.gradeModeData[0],
        ...this.groupList[0].total_vo_list[0],
      });
    },
    getIsForce() {
      getIsForce(this.checkedBookData.book_id).then((res) => {
        if (res.code == 200 && res.data) {
          let memoryData = {
            category: 0,
            num: 1,
          };
          this.$confirm("今天的记忆复习还没有完成哦，请先完成复习", "提示", {
            confirmButtonText: "前往复习",
            cancelButtonText: "退出",
            closeOnClickModal: false,
            closeOnPressEscape: false,
            showClose: false,
          })
            .then(() => {
              this.goReview(memoryData, 1);
            })
            .catch(() => {
              this.goStudyIndex();
            });
        }
      });
    },
    againMemoryClick(source) {
      this.$confirm(
        `再学一遍会将此模块的进度重置，请确认是否再学一遍`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          showClose: true,
          distinguishCancelAndClose: true,
        }
      )
        .then(() => {
          let data = {
            bookId: this.checkedBookData.book_id,
            unitId: this.checkedUnit,
            source,
          };
          postStudyAgain(data).then((res) => {
            if (res.code == 200) {
              this.$alert("重置进度成功", "提示");
              this.getClassData();
            }
          });
        })
        .catch(() => {});
    },
    getReviewNumber() {
      getReviewNumber(this.checkedBookData.book_id).then((res) => {
        if (res.code == 200 && res.data) {
          this.reviewData = res.data.filter((item) => {
            return item.num > 0;
          });
          let memoryData = this.reviewData.filter((item) => {
            return item.category == 0;
          })[0];
          console.log(memoryData);
        }
      });
    },
    goUnitList(route) {
      this.$router.push({
        name: route,
        query: {
          unitId: this.checkedUnit,
          category: 24,
          questionType:
            this.questionType.length > 0
              ? this.questionType.join(",")
              : [1, 2, 3, 4, 5].join(","),
        },
      });
    },
    // 换课程
    // async checkBook(data) {
    //   if (
    //     this.checkedBookData &&
    //     data.book_id != this.checkedBookData.book_id
    //   ) {
    //     await this.$store.dispatch("SetTimeEnglish", 1);
    //   }
    //   this.checkedBookData = data;
    //   localStorage.setItem("bookData", JSON.stringify(this.checkedBookData));
    //   this.getUnitList();
    //   this.getReviewNumber();
    //   if (!this.$store.getters.isTeacher) {
    //     this.getIsForce();
    //   }
    // },
    getUnitList() {
      let params = {
        bookId: this.checkedBookData.book_id,
      };
      this.getUnitLoading = true;
      getUnitList(params)
        .then((res) => {
          this.getUnitLoading = false;
          if (res.code == 200 && res.data) {
            res.data.forEach((item) => {
              item.word_total_vo_list.sort((a, b) => {
                return a.category - b.category;
              });
              let data = [];
              for (let i = 0; i < 4; i++) {
                let scoreData = item.category_vo_list.filter((item) => {
                  return item.category == i;
                });
                let reviewData = item.unit_vo_list.filter((item) => {
                  return item.category == i;
                });
                let studyData = item.total_vo_list.filter((item) => {
                  return item.category == i;
                });
                let sumData = item.word_total_vo_list.filter((item) => {
                  return item.category == i;
                });
                let objData = {
                  category: i,
                  studyNum: studyData.length > 0 ? studyData[0].number : 0,
                  totalNum: sumData.length > 0 ? sumData[0].word_sum : 0,
                  status: sumData.length > 0 ? sumData[0].status : 0,
                  reviewNum:
                    reviewData.length > 0 ? reviewData[0].study_number : 0,
                  nearScore: scoreData.length > 0 ? scoreData[0].score : null,
                };
                objData.progressNum =
                  objData.totalNum <= 0
                    ? 0
                    : objData.studyNum / objData.totalNum > 1
                    ? 100
                    : (objData.studyNum / objData.totalNum) * 100;
                data.push(objData);
              }
              data.sort((a, b) => {
                return a.category - b.category;
              });
              item.unitData = data;
            });
            this.unitList = res.data;
            let index = this.unitList.findIndex((item) => {
              return item.unit_id == this.checkedUnit;
            });
            if (index == -1 && res.data.length > 0) {
              // this.checkedUnit = res.data[0].unit_id;
              this.checkUnit(res.data[0]);
            }
          }
        })
        .catch(() => {
          this.getUnitLoading = false;
        });
    },
    goRoute(data) {
      console.log(1111111);
      if (
        this.$store.getters.isTeacher ||
        !data.totalNum ||
        data.totalNum <= 0
      ) {
        return;
      }
      let categoryObj = {
        0: "memory",
        1: "wordListen",
        2: "dictation",
        3: "writeMemory",
      };
      let categoryObj1 = {
        0: "智能记忆",
        1: "智能词听",
        2: "智能听写",
        3: "智能默写",
      };
      if (data.status > 1) {
        this.$confirm(
          `${categoryObj1[data.category]}学习已完成,前往极速挑战`,
          "提示",
          {
            confirmButtonText: "极速模式",
            cancelButtonText: "普通模式",
            showClose: true,
            distinguishCancelAndClose: true,
          }
        )
          .then(() => {
            this.$router.push({
              name: "quickTest",
              query: {
                unitId: this.checkedUnit,
                category: data.category,
              },
            });
          })
          .catch((type) => {
            if (type != "close") {
              this.$router.push({
                name: "generalTest",
                query: {
                  unitId: this.checkedUnit,
                  category: data.category,
                },
              });
            }
          });
      } else {
        this.$router.push({
          name: categoryObj[data.category],
          query: {
            unitId: this.checkedUnit,
            groupId: this.groupId,
            title: "体验生词库",
          },
        });
      }
    },
    goTestChal() {
      this.$confirm(`前往终极挑战`, "提示", {
        confirmButtonText: "极速模式",
        cancelButtonText: "普通模式",
        showClose: true,
        distinguishCancelAndClose: true,
        beforeClose: this.$beforeConfirmClose,
      })
        .then(() => {
          this.$router.push({
            name: "quickTest",
            query: {
              unitId: this.checkedUnit,
              category: 5,
            },
          });
        })
        .catch((type) => {
          if (type != "close") {
            this.$router.push({
              name: "generalTest",
              query: {
                unitId: this.checkedUnit,
                category: 5,
              },
            });
          }
        });
    },
    goTestCenter() {
      this.$router.push({
        name: "testCenter",
      });
    },
    goWordBook(tab) {
      this.$router.push({
        name: "wordBook",
        query: {
          tab,
          experientialWord: true,
        },
      });
    },
    goStudyIndex() {
      this.$router.push({
        name: "studyIndex",
      });
    },
    goMemoryReview() {
      this.$router.push({
        name: "memoryReview",
        query: {
          title: "体验生词库",
        },
      });
    },
    goProgressCourse() {
      this.$router.push({
        name: "progressCourse",
      });
    },
    formatProgress(data) {
      return function() {
        if (data.status > 2 && (data.nearScore || data.nearScore == 0)) {
          return data.nearScore + "分";
        } else if (data.totalNum) {
          if (data.number == data.totalNum) {
            return "已完成";
          } else {
            return "" + data.number + "/" + data.totalNum;
          }
        } else {
          return "未解锁";
        }
      };
    },
    startSteps() {
      this.$nextTick(() => {
        this.driver = new Driver({
          allowClose: false,
          doneBtnText: "完成", //结束按钮的文字
          stageBackground: "#ffffff", //突出显示元素的背景颜色
          nextBtnText: "我知道了", //下一步按钮的文字
          prevBtnText: "上一步", //上一步按钮的文字
          closeBtnText: "关闭", //关闭按钮的文字
          // onHighlightStarted: (Element) => {
          //   console.log(Element);
          // }, //元素即将突出显示时调用
          // onHighlighted: (Element) => {
          //   console.log(Element);
          // }, //元素完全突出显示时调用
          // onDeselected: (Element) => {
          //   console.log(Element);
          // }, //取消选择元素时调用
          // onReset: (Element) => {
          //   console.log(Element);
          // }, //当要清除叠加时调用
          // onNext: (Element) => {
          //   console.log(Element);
          // }, //在任何步骤中移动到下一步时调用
          // onPrevious: (Element) => {
          //   console.log(Element);
          // }, //在任何步骤中移动到上一步时调用
        });
        this.driver.defineSteps(steps);
        this.driver.start();
      });
    },
    // async goReview(data, isForce) {

    //   console.log(data, isForce, "data, isForce");
    async goReview(item) {
      // const { data } = await wordSearch({
      //   book_id: this.checkedBookData.book_id,
      //   category: 0,
      //   grade_id: this.checkedUnit,
      //   page_require: { page_num: 1, page_size: 10 },
      // });
      const { data } = await experienceWordReviewSearch({
        book_id: 600,
        category: 4,
        unit_id: this.checkedUnit,
        page_require: { page_num: 1, page_size: 10 },
      });
      if (data.word_info_list.length <= 0 || item.num <= 0) {
        this.$alert("暂无可以复习的单词", "提示");
      } else {
        this.$router.push({
          name: "memory",
          query: {
            isReview: true,
            title: "体验生词库",
            unitId: this.checkedUnit,
          },
        });
      }
      // if (data) {
      //   if (data.num > 0) {
      //     this.$router.push({
      //       name: this.categoryRoute[data.category],
      //       query: {
      //         isReview: true,
      //         isForce,
      //       },
      //     });
      //   }
      // } else {
      //   let filterData = this.reviewData.filter((item) => {
      //     return item.num > 0;
      //   });
      //   if (filterData.length > 0) {
      //     this.$router.push({
      //       name: this.categoryRoute[filterData[0].category],
      //       query: {
      //         isReview: true,
      //       },
      //     });
      //   } else {
      //     this.$alert("暂无可以复习的单词", "提示");
      //   }
      // }
    },
    getClassData() {
      EventBus.$emit("openLoading", {});
      getClassData()
        .then((res) => {
          EventBus.$emit("closeLoading", {});
          if (res.code == 200 && res.data) {
            res.data = res.data.filter((item) => {
              return item.status == 0;
            });
            this.classData = res.data;
            if (this.classData) {
              let index = this.classData.findIndex((item) => {
                return item.book_id == this.checkedBookData.book_id;
              });
              if (index == -1) {
                this.goStudyIndex();
              } else {
                // this.checkBook(this.classData[index]);
              }
            }
          }
        })
        .catch(() => {
          EventBus.$emit("closeLoading", {});
        });
    },

    checkUnit(data) {
      console.log(data);
      this.groupList = [];
      this.checkedUnit = data.id;
      localStorage.setItem("checkedUnit", JSON.stringify(data));
      if (data.info) {
        this.$set(this.gradeModeData, 0, {
          ...this.gradeModeData[0],
          ...data.info,
        });
      } else {
        this.$set(this.gradeModeData, 0, demoData[0]);
      }
      this.experienceReview(data.id);
      // this.groupUnit(data.id);
      // this.individualList(data.id);
    },
    studyAgain(source, number) {
      let isAgain = this.unitList.every((item) => {
        let data = item.word_total_vo_list.filter((status) => {
          return status.category == source;
        });
        return data && data[0].status == 5;
      });
      if (isAgain) {
        this.$confirm(
          `再学一遍会将此模块的所有进度重置，请确认是否再学一遍`,
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            showClose: true,
            distinguishCancelAndClose: true,
          }
        )
          .then(() => {
            let params = {
              bookId: this.checkedBookData.book_id,
              number,
              source,
            };
            studyAgain(params).then((res) => {
              if (res.code == 200) {
                this.getClassData();
                this.$alert("重置进度成功", "提示");
              }
            });
          })
          .catch(() => {});
      } else {
        this.$alert("请本模块的所有单元通过终极挑战再试", "提示");
      }
    },
  },
  created() {
    this.bookData = JSON.parse(localStorage.getItem("bookData"));
    this.getExperienceUnit();
    this.checkedUnit = localStorage.getItem("checkedUnit")
      ? JSON.parse(localStorage.getItem("checkedUnit")).id
      : null;
    this.checkedBookData = JSON.parse(localStorage.getItem("bookData"));
    // this.getClassData();
  },
  beforeDestroy() {
    if (this.driver) {
      this.driver.reset();
    }
  },
  mounted() {},
  components: { Header },
  watch: {},
};
</script>

<style scoped lang="scss">
.study-unit-list {
  li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 48px;
  }
}
.c120 {
  /deep/.el-progress-circle {
    width: 0.625rem !important;
    height: 0.625rem !important;
  }
  /deep/.el-progress__text {
    font-size: 0.083333rem !important;
  }
}
.c80 {
  /deep/.el-progress-circle {
    width: 0.416666rem !important;
    height: 0.416666rem !important;
  }
  /deep/.el-progress__text {
    font-size: 0.083333rem !important;
  }
  // width: 0.416666rem !important;
  // height: 0.416666rem !important;
}
</style>
